<template>
    <div>
        <a-table
            :headerList="[
                { name: 'id', text: 'Id' },
                { name: 'parentId', text: '父级Id' },
                { name: 'name', text: '名称' },
                { name: 'oper', text: '操作' },
                { name: 'oper1', text: '操作1' },
            ]"
            :dataList="cateItems"
            :selectable="true"
            :getCanBeSelectedFunc="(a) => a.id != 1 && a.id != 3"
            v-model:value="cates"
        >
            <template v-slot:data-oper="{ data }">
                <a-dropdown-button-group :displayCount="2">
                    <a-input-switch
                        :color="'primary'"
                        :size="'s'"
                        :value="data.on"
                        @update:value="data.on = !data.on"
                    ></a-input-switch>

                    <template v-slot:moreBtn>
                        <a-button :square="true" :color="'default'" :size="'s'">
                            <span class="fa fa-ellipsis-h"></span>
                        </a-button>
                    </template>
                </a-dropdown-button-group>
            </template>
            <template v-slot:data-oper1>
                <a-dropdown-button-group :displayCount="2">
                    <a-button :color="'primary'" :size="'s'">Click</a-button>

                    <template v-slot:moreBtn>
                        <a-button :square="true" :color="'default'" :size="'s'">
                            <span class="fa fa-ellipsis-h"></span>
                        </a-button>
                    </template>
                </a-dropdown-button-group>
            </template>
        </a-table>
        <h2>多级表头</h2>
        <a-table
            :headerList="orderHeaderList"
            :dataList="orderDataList"
            v-model:value="orders"
        ></a-table>
        <p>注意：多级表头仅仅最低层级的表头可以指定width</p>
        <h2>固定高度</h2>
        <a-table
            :headerList="[
                { name: 'id', text: 'Id' },
                { name: 'parentId', text: '父级Id' },
                { name: 'name', text: '名称' },
                { name: 'oper', text: '操作' },
                { name: 'oper1', text: '操作1' },
            ]"
            :dataList="cateItems"
            :selectable="true"
            :getCanBeSelectedFunc="(a) => a.id != 1 && a.id != 3"
            v-model:value="cates"
            :maxHeight="400"
        >
            <template v-slot:data-oper="{ data }">
                <a-dropdown-button-group :displayCount="2">
                    <a-input-switch
                        :color="'primary'"
                        :size="'s'"
                        :value="data.on"
                        @update:value="data.on = !data.on"
                    ></a-input-switch>

                    <template v-slot:moreBtn>
                        <a-button :square="true" :color="'default'" :size="'s'">
                            <span class="fa fa-ellipsis-h"></span>
                        </a-button>
                    </template>
                </a-dropdown-button-group>
            </template>
            <template v-slot:data-oper1>
                <a-dropdown-button-group :displayCount="2">
                    <a-button :color="'primary'" :size="'s'">Click</a-button>

                    <template v-slot:moreBtn>
                        <a-button :square="true" :color="'default'" :size="'s'">
                            <span class="fa fa-ellipsis-h"></span>
                        </a-button>
                    </template>
                </a-dropdown-button-group>
            </template>
        </a-table>
        <h2>固定列</h2>
        <a-table
            :headerList="[
                { name: 'id', text: 'Id' },
                { name: 'parentId', text: '父级Id' },
                { name: 'name', text: '名称' },
                { name: 'oper', text: '操作' },
                { name: 'oper1', text: '操作1' },
            ]"
            :dataList="cateItems"
            :selectable="true"
            :getCanBeSelectedFunc="(a) => a.id != 1 && a.id != 3"
            :fixLeft="true"
            :fixRight="true"
            :tableWidth="1900"
            v-model:value="cates"
        >
            <template v-slot:data-oper="{ data }">
                <a-dropdown-button-group :displayCount="2">
                    <a-input-switch
                        :color="'primary'"
                        :size="'s'"
                        :value="data.on"
                        @update:value="data.on = !data.on"
                    ></a-input-switch>

                    <template v-slot:moreBtn>
                        <a-button :square="true" :color="'default'" :size="'s'">
                            <span class="fa fa-ellipsis-h"></span>
                        </a-button>
                    </template>
                </a-dropdown-button-group>
            </template>
            <template v-slot:data-oper1>
                <a-dropdown-button-group :displayCount="2">
                    <a-button :color="'primary'" :size="'s'">Click</a-button>

                    <template v-slot:moreBtn>
                        <a-button :square="true" :color="'default'" :size="'s'">
                            <span class="fa fa-ellipsis-h"></span>
                        </a-button>
                    </template>
                </a-dropdown-button-group>
            </template>
        </a-table>
        <h2>扩展行</h2>
        <a-table
            :headerList="[
                { name: 'id', text: 'Id' },
                { name: 'parentId', text: '父级Id' },
                { name: 'name', text: '名称' },
                { name: 'oper', text: '操作' },
                { name: 'oper1', text: '操作1' },
            ]"
            :dataList="cateItems"
            :selectable="true"
            :getCanBeSelectedFunc="(a) => a.id != 1 && a.id != 3"
            v-model:value="cates"
            :expandable="true"
            v-model:expandValue="expandValue"
        >
            <template v-slot:data-oper="{ data }">
                <a-dropdown-button-group :displayCount="2">
                    <a-input-switch
                        :color="'primary'"
                        :size="'s'"
                        :value="data.on"
                        @update:value="data.on = !data.on"
                    ></a-input-switch>

                    <template v-slot:moreBtn>
                        <a-button :square="true" :color="'default'" :size="'s'">
                            <span class="fa fa-ellipsis-h"></span>
                        </a-button>
                    </template>
                </a-dropdown-button-group>
            </template>
            <template v-slot:data-oper1="{ data, dataIndex }">
                <a-dropdown-button-group :displayCount="2">
                    <a-button
                        :color="'primary'"
                        :size="'s'"
                        @click="expandValue = [data.id]"
                        >Click</a-button
                    >

                    <template v-slot:moreBtn>
                        <a-button :square="true" :color="'default'" :size="'s'">
                            <span class="fa fa-ellipsis-h"></span>
                        </a-button>
                    </template>
                </a-dropdown-button-group>
            </template>
            <template v-slot:expandRow="{ data, dataIndex }">
                <div class="c-p-m">
                    {{ dataIndex + ": " + data.name }}
                </div>
            </template>
        </a-table>
        <pre class="language-html"><code>{{ `<a-table
    :headerList="[
        { name: 'id', text: 'Id' },
        { name: 'parentId', text: '父级Id' },
        { name: 'name', text: '名称' },
        { name: 'oper', text: '操作' },
        { name: 'oper1', text: '操作1' },
    ]"
    :dataList="cateItems"
    :selectable="true"
    :getCanBeSelectedFunc="(a) => a.id != 1 && a.id != 3"
    v-model:value="cates"
>
    <template v-slot:data-oper="{ data }">
        <a-dropdown-button-group :displayCount="2">
            <a-input-switch
                :color="'primary'"
                :size="'s'"
                :value="data.on"
                @update:value="data.on = !data.on"
            ></a-input-switch>
            <template v-slot:moreBtn>
                <a-button :square="true" :color="'default'" :size="'s'">
                    <span class="fa fa-ellipsis-h"></span>
                </a-button>
            </template>
        </a-dropdown-button-group>
    </template>
    <template v-slot:data-oper1>
        <a-dropdown-button-group :displayCount="2">
            <a-button :color="'primary'" :size="'s'">Click</a-button>
            <template v-slot:moreBtn>
                <a-button :square="true" :color="'default'" :size="'s'">
                    <span class="fa fa-ellipsis-h"></span>
                </a-button>
            </template>
        </a-dropdown-button-group>
    </template>
</a-table>
<h2>多级表头</h2>
<a-table
    :headerList="orderHeaderList"
    :dataList="orderDataList"
    v-model:value="orders"
></a-table>
<p>注意：多级表头仅仅最低层级的表头可以指定width</p>
<h2>固定高度</h2>
<a-table
    :headerList="[
        { name: 'id', text: 'Id' },
        { name: 'parentId', text: '父级Id' },
        { name: 'name', text: '名称' },
        { name: 'oper', text: '操作' },
        { name: 'oper1', text: '操作1' },
    ]"
    :dataList="cateItems"
    :selectable="true"
    :getCanBeSelectedFunc="(a) => a.id != 1 && a.id != 3"
    v-model:value="cates"
    :maxHeight="400"
>
    <template v-slot:data-oper="{ data }">
        <a-dropdown-button-group :displayCount="2">
            <a-input-switch
                :color="'primary'"
                :size="'s'"
                :value="data.on"
                @update:value="data.on = !data.on"
            ></a-input-switch>
            <template v-slot:moreBtn>
                <a-button :square="true" :color="'default'" :size="'s'">
                    <span class="fa fa-ellipsis-h"></span>
                </a-button>
            </template>
        </a-dropdown-button-group>
    </template>
    <template v-slot:data-oper1>
        <a-dropdown-button-group :displayCount="2">
            <a-button :color="'primary'" :size="'s'">Click</a-button>
            <template v-slot:moreBtn>
                <a-button :square="true" :color="'default'" :size="'s'">
                    <span class="fa fa-ellipsis-h"></span>
                </a-button>
            </template>
        </a-dropdown-button-group>
    </template>
</a-table>
<h2>固定列</h2>
<a-table
    :headerList="[
        { name: 'id', text: 'Id' },
        { name: 'parentId', text: '父级Id' },
        { name: 'name', text: '名称' },
        { name: 'oper', text: '操作' },
        { name: 'oper1', text: '操作1' },
    ]"
    :dataList="cateItems"
    :selectable="true"
    :getCanBeSelectedFunc="(a) => a.id != 1 && a.id != 3"
    :fixLeft="true"
    :fixRight="true"
    :tableWidth="1900"
    v-model:value="cates"
>
    <template v-slot:data-oper="{ data }">
        <a-dropdown-button-group :displayCount="2">
            <a-input-switch
                :color="'primary'"
                :size="'s'"
                :value="data.on"
                @update:value="data.on = !data.on"
            ></a-input-switch>
            <template v-slot:moreBtn>
                <a-button :square="true" :color="'default'" :size="'s'">
                    <span class="fa fa-ellipsis-h"></span>
                </a-button>
            </template>
        </a-dropdown-button-group>
    </template>
    <template v-slot:data-oper1>
        <a-dropdown-button-group :displayCount="2">
            <a-button :color="'primary'" :size="'s'">Click</a-button>
            <template v-slot:moreBtn>
                <a-button :square="true" :color="'default'" :size="'s'">
                    <span class="fa fa-ellipsis-h"></span>
                </a-button>
            </template>
        </a-dropdown-button-group>
    </template>
</a-table>` }}</code></pre>
        <pre class="language-javascript"><code>{{ `export default {
    data() {
        return {
            cateItems: [
                { id: 1, parentId: null, name: '面包蛋糕', on: true },
                { id: 2, parentId: null, name: '麻辣食品', on: true },
                { id: 3, parentId: null, name: '膨化食品', on: true },

                { id: 4, parentId: 1, name: '面包', on: true },
                { id: 5, parentId: 1, name: '蛋糕', on: true },
                { id: 6, parentId: 1, name: '三明治', on: true },

                { id: 7, parentId: 2, name: '豆干', on: true },
                { id: 8, parentId: 2, name: '辣条', on: true },
                { id: 9, parentId: 2, name: '凤爪', on: true },

                { id: 10, parentId: 4, name: '面包商品1', on: true },
                { id: 11, parentId: 4, name: '面包商品2', on: true },
                { id: 12, parentId: 4, name: '面包商品3', on: true },
            ],
            cates: [],
            cateItems1: [],
            selectable: true,
            orderHeaderList: [
                { name: 'date', text: 'Date', width: 20 },
                {
                    name: 'deliveryInfo', text: 'Delivery Info', subHeaders: [
                        { name: 'name', text: 'Name', width: 20 },
                        {
                            name: 'addressInfo', text: 'Address Info', subHeaders: [
                                { name: 'state', text: 'State', width: 20 },
                                { name: 'address', text: 'Address', width: 20 },
                                { name: 'city', text: 'City', width: 20 },
                                { name: 'zip', text: 'Zip', width: 20 },
                            ]
                        },
                    ]
                },
                {
                    name: 'oper', text: 'Oper', subHeaders: [
                        { name: 'oper1', text: 'Oper1', width: 20 },
                        { name: 'oper2', text: 'Oper2', width: 20 },
                    ]
                },
            ],
            orderDataList: [
                { id: 1, date: '2023/02/06', name: '张三', state: '1', address: '1', city: '1', zip: '1', 'oper1': '1', 'oper2': '1' },
                { id: 2, date: '2023/02/05', name: '李四', state: '2', address: '2', city: '2', zip: '2', 'oper1': '2', 'oper2': '2' },
                { id: 3, date: '2023/02/04', name: '王五', state: '3', address: '3', city: '3', zip: '3', 'oper1': '3', 'oper2': '3' },
                { id: 4, date: '2023/02/03', name: '刘六', state: '4', address: '4', city: '4', zip: '4', 'oper1': '4', 'oper2': '4' },
            ],
            orders: [],
        }
    },
}` }}</code></pre>

        <div v-for="type in typeList" :key="type.name" class="c-m-t-m">
            <p>{{ type.name }}</p>
            <a-table
                :headerList="type.headerList"
                :dataList="type.dataList"
            ></a-table>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            cateItems: [
                { id: 1, parentId: null, name: '面包蛋糕', on: true },
                { id: 2, parentId: null, name: '麻辣食品', on: true },
                { id: 3, parentId: null, name: '膨化食品', on: true },

                { id: 4, parentId: 1, name: '面包', on: true },
                { id: 5, parentId: 1, name: '蛋糕', on: true },
                { id: 6, parentId: 1, name: '三明治', on: true },

                { id: 7, parentId: 2, name: '豆干', on: true },
                { id: 8, parentId: 2, name: '辣条', on: true },
                { id: 9, parentId: 2, name: '凤爪', on: true },

                { id: 10, parentId: 4, name: '面包商品1', on: true },
                { id: 11, parentId: 4, name: '面包商品2', on: true },
                { id: 12, parentId: 4, name: '面包商品3', on: true },
            ],
            cates: [],
            cateItems1: [],
            selectable: true,
            expandValue: [1],
            orderHeaderList: [
                { name: 'date', text: 'Date', width: 20 },
                {
                    name: 'deliveryInfo', text: 'Delivery Info', subHeaders: [
                        { name: 'name', text: 'Name', width: 20 },
                        {
                            name: 'addressInfo', text: 'Address Info', subHeaders: [
                                { name: 'state', text: 'State', width: 20 },
                                { name: 'address', text: 'Address', width: 20 },
                                { name: 'city', text: 'City', width: 20 },
                                { name: 'zip', text: 'Zip', width: 20 },
                            ]
                        },
                    ]
                },
                {
                    name: 'oper', text: 'Oper', subHeaders: [
                        { name: 'oper1', text: 'Oper1', width: 20 },
                        { name: 'oper2', text: 'Oper2', width: 20 },
                    ]
                },
            ],
            orderDataList: [
                { id: 1, date: '2023/02/06', name: '张三', state: '1', address: '1', city: '1', zip: '1', 'oper1': '1', 'oper2': '1' },
                { id: 2, date: '2023/02/05', name: '李四', state: '2', address: '2', city: '2', zip: '2', 'oper1': '2', 'oper2': '2' },
                { id: 3, date: '2023/02/04', name: '王五', state: '3', address: '3', city: '3', zip: '3', 'oper1': '3', 'oper2': '3' },
                { id: 4, date: '2023/02/03', name: '刘六', state: '4', address: '4', city: '4', zip: '4', 'oper1': '4', 'oper2': '4' },
            ],
            orders: [],
            typeList: [
                {
                    name: 'props',
                    headerList: [
                        { name: 'name', text: '名称' },
                        { name: 'remark', text: '说明' },
                        { name: 'type', text: '类型' },
                        { name: 'default', text: '默认值' },
                    ],
                    dataList: [
                        { name: 'color', remark: '主题色', type: 'default | primary | secondary | success | warning | error', default: 'default' },
                        { name: 'disabled', remark: '是否禁用', type: 'boolean', default: 'false' },
                        { name: 'size', remark: '尺寸', type: 'xs | s | m | l | xl', default: 'm' },
                        { name: 'sharp', remark: '是否尖角', type: 'boolean', default: 'false' },
                        { name: 'rules', remark: '表单验证规则', type: 'Array<{name: required | func, value: boolean | Function | any, errorMessage: string}>', default: '[]' },
                        { name: 'value', remark: '值', type: 'Array', default: '[]' },
                        { name: 'headerList', remark: '表头列表', type: 'Array', default: '[]' },
                        { name: 'getHeaderNameFunc', remark: '获取表头字段名称方法', type: 'Function', default: 'a => a.name' },
                        { name: 'getHeaderTextFunc', remark: '获取表头字段文本方法', type: 'Function', default: 'a => a.text' },
                        { name: 'getHeaderWidthFunc', remark: '获取表头宽度（注意不是像素，而是权重）方法', type: 'Function', default: 'a => a.width ?? 10' },
                        { name: 'getSubHeadersFunc', remark: '获取子表头方法', type: 'Function', default: 'a => a.subHeaders' },
                        { name: 'dataList', remark: '数据列表', type: 'Array', default: '[]' },
                        { name: 'selectable', remark: '是否可勾选', type: 'boolean', default: 'false' },
                        { name: 'selectType', remark: '选择方式，可选multi、single，默认multi，注意，即使为single方式，update:value事件的值也是数组', type: 'string', default: 'multi' },
                        { name: 'getValueFunc', remark: '获取值的方法', type: 'Function', default: 'a => a.id' },
                        { name: 'getKeyFunc', remark: '获取key（用于dom diff的key）的方法', type: 'Function', default: 'a => a.id' },
                        { name: 'maxHeight', remark: '组件最高高度，如果表格部分高度超过此高度，将会保持表头固定，显示滚动条', type: 'number', default: 'null' },
                        { name: 'getCanBeSelectedFunc', remark: '获取某一列是否可被勾选的方法', type: 'Function', default: 'a => true' },
                        { name: 'tableWidth', remark: '表格宽度（注意不是容器而是表格的宽度，设置后表格将可左右滚动）', type: 'number', default: 'null' },
                        { name: 'fixLeft', remark: '是否固定第一列（注意如果同时开启selectable，则勾选框也会固定）', type: 'boolean', default: 'false' },
                        { name: 'fixRight', remark: '是否固定最后第一列', type: 'boolean', default: 'false' },
                    ],
                },
                {
                    name: 'slots',
                    headerList: [
                        { name: 'name', text: '名称' },
                        { name: 'remark', text: '说明' },
                        { name: 'data', text: 'scope数据' },
                    ],
                    dataList: [
                        { name: '`header-${getHeaderNameFunc(header)}`', remark: '替换表头单元格', data: '{header: any}' },
                        { name: '`data-${getHeaderNameFunc(header)}`', remark: '替换数据单元格', data: '{header: any, data: any, dataIndex: number}' },
                        { name: 'emptyTips', remark: '替换没有任何数据展示的元素', data: '{}' },
                    ],
                },
                {
                    name: 'emits',
                    headerList: [
                        { name: 'name', text: '名称' },
                        { name: 'remark', text: '说明' },
                        { name: 'params', text: '参数' },
                    ],
                    dataList: [
                        { name: 'update:value', remark: '值发生变化', params: 'Array' },
                        { name: 'validate', remark: '输入验证', params: '[boolean, string]' },
                    ],
                }
            ]
        }
    },
}
</script>